<template>
  <div class="addPark">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="停车场名称" prop="parkingName">
        <el-input
          class="parkname"
          :placeholder="inputName"
          v-model="ruleForm.parkingName"
        ></el-input>
      </el-form-item>
      <el-form-item label="区域" prop="area">
        <CityArea
          :mapLocation="true"
          ref="cityArea"
          @callback="callbackComponent"
          :cityAreaValue.sync="ruleForm.area"
        />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio
            v-for="item in type"
            :label="item.value"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>

      <el-form-item label="可停放车辆" prop="carsNumber">
        <el-input
          class="carsNumber"
          placeholder="请输入数字类型"
          v-model.number="ruleForm.carsNumber"
        ></el-input>
      </el-form-item>
      <el-form-item label="禁启用">
        <el-radio-group v-model="ruleForm.status">
          <el-radio
            v-for="item in status"
            :label="item.value"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="位置" prop="desc">
        <div class="address-map">
          <AMap
            @getLnglat="getLnglat"
            ref="amap"
            :options="option_map"
            @callback="callbackComponent"
          />
        </div>
      </el-form-item>
      <el-form-item label="经纬度" prop="lnglat">
        <el-input class="lnglat" v-model="ruleForm.lnglat" disabled></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确定</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  // AMAP
  import AMap from "../amap/amap.vue"
  import CityArea from "../../components/common/cityArea/cityArea.vue"
  import { ParkingAdd, ParkingDetailed, ParkingEdit } from "@/api/parking"
  export default {
    name: "ParkingAdd",
    components: { CityArea, AMap },
    data() {
      return {
        status: [
          { label: "禁用", value: false },
          { label: "启用", value: true },
        ],
        type: [
          { label: "室内", value: 1 },
          { label: "室外", value: 2 },
        ],
        areaOptions: [],
        inputName: "请选择省市区",
        ruleForm: {
          parkingName: "",
          // areaValue: "",
          carsNumber: "",
          type: "",
          desc: "",
          status: "",
          lnglat: "",
          area: "",
        },
        rules: {
          parkingName: [
            { required: true, message: "请输入停车场名称", trigger: "change" },
          ],
          // area: [{ required: true, message: "请选择省市区", trigger: "change" }],
          lnglat: [
            { required: true, message: "经纬度不能为空", trigger: "change" },
          ],
          carsNumber: [{ type: "number", message: "必须为数字值" }],
        },
        // 按钮加载
        button_loading: false,
        // id
        id: this.$route.query.id,
        // 地图配置
        option_map: {
          mapLoad: true,
        },
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // console.log(this.ruleForm)
            // this.addParking()
            this.id ? this.editParking() : this.addParking()
          } else {
            console.log("error submit!!")
            return false
          }
        })
      },
      // 新增停车场接口
      addParking() {
        this.button_loading = true
        ParkingAdd(this.ruleForm)
          .then((response) => {
            console.log(response)
            this.$message({
              type: "success",
              message: response.data.message,
            })
            this.$router.push({
              name: "ParkingIndex",
            })
            this.button_loading = false
            // this.reset("form")
          })
          .catch((error) => {
            this.button_loading = false
          })
      },
      /** 修改停车场API */
      editParking() {
        let requestData = JSON.parse(JSON.stringify(this.ruleForm))
        requestData.id = this.id
        this.button_loading = true
        ParkingEdit(requestData)
          .then((response) => {
            this.$message({
              type: "success",
              message: response.data.message,
            })
            this.button_loading = false
            this.$router.push({
              name: "ParkingIndex",
            })
          })
          .catch((error) => {
            this.button_loading = false
          })
      },
      // 获取经纬度
      getLnglat(data) {
        // console.log(data, "getLnglat")
        this.ruleForm.lnglat = data.lnglat.value
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      handleChange(value) {
        console.log(value)
      },
      // 一个组件调用多个方法的方式
      callbackComponent(params) {
        // this.$refs.amap
        // console.log(params, ";;;")
        if (params.function) {
          this[params.function](params.data)
        }
      },
      setMapCenter(data) {
        this.$refs.amap.setMapCenter(data.address)
        // console.log(data)
      },
      /** 地图加载完成 */
      mapLoad() {
        this.getParkDetail()
      },
      // 获取列表详情
      getParkDetail() {
        if (!this.id) {
          return false
        }
        ParkingDetailed({ id: this.id }).then((res) => {
          const data = res.data.data
          // console.log(data)
          // console.log(Object.keys(this.ruleForm))
          // 还原映射表单数据
          for (let key in data) {
            // console.log(key)
            if (Object.keys(this.ruleForm).includes(key)) {
              this.ruleForm[key] = data[key]
            }
          }
          // 初始化省市區
          this.$refs.cityArea.initDefault(data.region)
        })
      },
    },
    beforeMount() {
      this.getParkDetail()
    },
  }
</script>
<style lang='scss'>
  @import "./index.scss";
  .address-map {
    width: 100%;
    height: 500px;
}
</style>